Skip to content

Instantly share code, notes, and snippets.

@rayliverified

rayliverified/0RSIRMJqgBkRZ3OKSTQ8.dart

Created May 20, 2024 13:59
Show Gist options
  • Save rayliverified/e0f05d454f8cee708c8c8f87a2e90afc to your computer and use it in GitHub Desktop.
Save rayliverified/e0f05d454f8cee708c8c8f87a2e90afc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
0RSIRMJqgBkRZ3OKSTQ8.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'MyApp Demo',
debugShowCheckedModeBanner: false,
home: Scaffold(
body: FeatureBlockItemsGridWithImageGridStaggered(),
),
);
}
}
class FeatureBlockItemsGridWithImageGridStaggered extends StatelessWidget {
const FeatureBlockItemsGridWithImageGridStaggered({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 1500,
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
child: Container(
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 48, vertical: 80),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Container(
width: double.infinity,
clipBehavior: Clip.hardEdge,
constraints: const BoxConstraints(
maxWidth: 800,
),
decoration: const BoxDecoration(),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.center,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
borderRadius: BorderRadius.circular(22),
),
child: const Icon(
Icons.phone_android,
size: 40,
color: Color(0xFF5C69E5),
),
),
const SizedBox(height: 24),
Text(
'Android',
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 32,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 8),
Text(
'Customize components to match your design perfectly.',
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 18,
height: 1.3,
),
)
],
),
),
),
const SizedBox(width: 60),
Expanded(
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.center,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
borderRadius: BorderRadius.circular(22),
),
child: const Icon(
Icons.home,
size: 40,
color: Color(0xFF5C69E5),
),
),
const SizedBox(height: 24),
Text(
'iOS',
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 32,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 8),
Text(
'Get code output that you can tailor to your specific needs.',
overflow: TextOverflow.ellipsis,
maxLines: 4,
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 18,
height: 1.3,
),
)
],
),
),
)
],
),
),
const SizedBox(height: 60),
SizedBox(
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.center,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
borderRadius: BorderRadius.circular(22),
),
child: const Icon(
Icons.web_stories,
size: 40,
color: Color(0xFF5C69E5),
),
),
const SizedBox(height: 24),
Text(
'Web',
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 32,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 8),
Text(
'Integration into any web project is a breeze.',
overflow: TextOverflow.ellipsis,
maxLines: 4,
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 18,
height: 1.3,
),
)
],
),
),
),
const SizedBox(width: 60),
Expanded(
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.center,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
borderRadius: BorderRadius.circular(22),
),
child: const Icon(
Icons.dark_mode,
size: 40,
color: Color(0xFF5C69E5),
),
),
const SizedBox(height: 24),
Text(
'Desktop',
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 32,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 8),
Text(
'Codelessly works seamlessly for both apps and websites.',
overflow: TextOverflow.ellipsis,
maxLines: 4,
style: GoogleFonts.getFont(
'Poppins',
color: Colors.black,
fontSize: 18,
height: 1.3,
),
)
],
),
),
)
],
),
)
],
),
),
),
const SizedBox(width: 80),
Flexible(
child: Container(
width: double.infinity,
clipBehavior: Clip.hardEdge,
constraints: const BoxConstraints(
maxWidth: 600,
),
decoration: const BoxDecoration(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
height: 300,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
image: const DecorationImage(
image: NetworkImage(
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2Fcc154800_f65d_1d20_9ff4_63434f4818b4_codelessly_gallery_image_1.png?alt=media&token=910c8921-0c68-4ed3-bffe-e653388ccf15',
),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15),
),
),
const SizedBox(height: 16),
Container(
width: double.infinity,
height: 200,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
image: const DecorationImage(
image: NetworkImage(
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2F963d9580_f729_1d20_9ff4_63434f4818b4_codelessly_gallery_image_2.png?alt=media&token=20074021-3117-49e2-9324-587c4a94a93e',
),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15),
),
)
],
),
),
),
const SizedBox(width: 16),
Expanded(
child: Container(
height: 516,
alignment: Alignment.bottomCenter,
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
height: 200,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
image: const DecorationImage(
image: NetworkImage(
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2F51f9d600_f7b9_1d20_9ff4_63434f4818b4_codelessly_gallery_image_3.png?alt=media&token=f17f84fa-5c98-45e8-847f-911f21741a46',
),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15),
),
),
const SizedBox(height: 16),
Container(
width: double.infinity,
height: 300,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: const Color(0xFFEFF1F9),
image: const DecorationImage(
image: NetworkImage(
'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/Qv1csB2UnHh6W3B2Xwmp68RXD642%2Fuploads%2Fimages%2F4803c180_f811_1d20_9ff4_63434f4818b4_codelessly_gallery_image_4.png?alt=media&token=c44f6693-5fbe-4d38-aff3-606f925f3ded',
),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15),
),
)
],
),
),
),
)
],
),
),
)
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment